<template>
  <div id="app">
    <!--    -->
    <div class="app">
      <div class="palette" @click="fans">
        <van-icon class="van-size" name="contact" size="1.7rem"/>
        粉丝
      </div>
      <div class="palette" @click="observer">
        <van-icon class="van-size" name="smile-o" size="1.7rem"/>
        关注
      </div>
      <div class="palette" @click="about">
        <van-icon class="van-size" name="chat-o" size="1.7rem"/>
        评论
      </div>
      <div class="palette" @click="inform">
        <van-icon class="van-size" name="more-o" size="1.7rem"/>
        通知
      </div>
    </div>
    <p class="vans_z">官方消息</p>
    <div class="information">
      <!--     官方消息-->
      <div class="official">
        <img
            src="https://p1.music.126.net/GjjcwMA9AE0RNYHbhpxYkQ==/109951163527904019.jpg?param=50y50"
            alt=""
            class="tx"
        />
        <p class="official_center">新歌发布</p>
        <van-icon name="arrow" class="wing" size="1.5rem"/>
      </div>
    </div>
    <!--    私信对话-->
    <p class="vans_z">私信对话</p>
    <div class="dialogue" v-for="(item,index) in list" :key="item.id">
      <img :src="item.avatarUrl" alt="" class="profilePhoto"/>
      <div class="nickname" style="display: flex">
      <div class="zxcv">
        <p class="fz">{{ item.nickname }}</p>
        <p class="col" v-if="list4[index]">{{ list4[index].msg }}</p>
      </div>
        <div class="timer">
          <p v-if="list6[index]">{{list6[index]|dateFormat}}</p>
          <span class="bubble" v-if="list5[index]">{{ list5[index] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//时间格式化  将时间戳转换为时间格式
import Vue from "vue";

Vue.filter("dateFormat",function (value, fmStr){
  let date = new Date(value);
  // let year =date.getFullYear();
  let month=date.getMonth()+1+"";
  let day=date.getDate()+"";
  if (fmStr&&fmStr==="yyyy-MM-dd"){
    return `${month.padStart(2,"0")}-${day.padStart(2,"0")}`
  }
  // 使用padStart用来补0操作(不足两位的时候，前面添加0)
  return `${month.padStart(2,"0")}-${day.padStart(2,"0")}`
})
export default {
  data() {
    return {
      list: {},
      list2: [],
      list3: [],
      uid: localStorage.getItem("uid"),
      list4: [],
      list5: [],
      list6:[],
    };
  },
  computed: {},
  watch: {},
  methods: {
    fans() {
      this.$router.push({
        path: "/fen",
      });
    },
    observer() {
      this.$router.push({
        path: "/recommend",
      });
    },
    about() {
      this.$router.push({
        path: "/observer",
      });
    },
    inform() {
      this.$router.push({
        path: "inform",
      });
    },
  },
  async created() {
    // 私信对话列表
    await this.$http
        .get(`http://localhost:3000/msg/recentcontact`, {
          withCredentials: true,
        })
        .then((res) => {
          this.list = res.data.data.follow;
        });
    // 历史消息
    await this.$http
        .get(`http://localhost:3000/msg/private`, {
          withCredentials: true,
        })
        .then((res) => {
          this.list3 = res.data.msgs;
          this.list3.forEach(v => {
            this.list4.push(JSON.parse(v.lastMsg));
            //新消息气泡
            this.list5.push(JSON.parse(v.newMsgCount));
            //最后发送消息的时间
            this.list6.push(JSON.parse(v.lastMsgTime))
          })
        })
    // 云村小秘书
    // this.$http.get(`http://localhost:3000/msg/private/history?uid=${this.uid}`, {
    //   withCredentials: true,
    // }).then((res) => {
    //
    //   this.list2 = res.data;
    //   console.log(this.list2);
    // })
  },
  mounted() {
  },
  components: {},
};
</script>
<style scoped>
.app {
  width: 100%;
  height: 7rem;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.vans_z {
  color: #777575;
  height: 2rem;
  line-height: 3rem;
  width: 90%;
  margin: 0 auto;
}

.profilePhoto {
  margin-left: 2rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

.information,
.dialogue {
  display: flex;
  flex-grow: 1;
  /*flex-direction: column;*/
  align-items: center;
  margin-top: 0.5rem;
  width: 100%;
  /*margin-left: 1rem;*/
  height: 6rem;
  background: #fff;
}

.palette {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.van-size {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.palette:first-child .van-size {
  background: #fe2c55;
}

.palette:nth-child(2) .van-size {
  background: #5ab5e7;
}

.palette:nth-child(3) .van-size {
  background: #f96a4e;
}

.palette:last-child .van-size {
  background: #ffbc20;
}

.nickname {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 1rem;
  justify-content: space-between;

}

.nickname p {
  margin: 0.2rem 0;
}

.fz {
  font-size: 18px;
}

.col {
  font-size: 14px;
  color: #999999;
  overflow: hidden;
  width: 15rem;
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*省略号*/
}

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 6rem;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.bubble {
  display: block;
  width: 1rem;
  height: 1rem;
  color: #fff;
  margin-top: 0.5rem;
  background: #ff3a3a;
  border-radius: 50%;
}

.tx {
  margin-left: 2rem;
  border-radius: 50%;
}

.official {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.official_center {
  margin-left: 1rem;
  flex: 1;
}

.wing {
  width: 2rem;
  text-align: center;
  padding: 0 1.5rem;
}
</style>
